<template>
  <div>
    <!-- 个人中心 -->
    <div class="container">
          <div class="left">
              <img src="../../assets/1.png" class="ro">
          </div>
  
          <div class="right">
            <b>报上你的大名 {{ user.username }}</b> <br>
            <i>闲物号：{{ user.useracc }}</i>
            <h3>还没有简介</h3>
          </div>
      </div>
  
    <div class="tb">
      订单详情
      <el-table
      :data="tableData"
      style="width: 100%;"
      stripe
      >
        <!-- 订单编号 -->
        <el-table-column
          prop="order_number"
          label="订单编号"
          width="200"
          >
        </el-table-column>
        <!-- 收货地址 -->
        <el-table-column
          prop="consignee_addr"
          label="收货地址"
          >
        </el-table-column>
        <!-- 发票 -->
        <el-table-column
          prop="order_fapiao_title"
          label="发票"
          >
        </el-table-column>
        <!-- 总金额 -->
        <el-table-column
          prop="order_price"
          label="总金额"
          >
        </el-table-column>
        <!-- 是否发货 -->
        <el-table-column
          prop="is_send"
          label="是否发货"
          >
        </el-table-column>
        <!-- 支付状态 -->
        <el-table-column
          prop="pay_status"
          label="是否支付"
          >
          <template slot-scope="scope">
          <span v-if="scope.row.pay_status != 0">已支付</span>
          <span v-else>未支付</span>
          </template>
        </el-table-column>
      </el-table>
  </div>
  
  </div> 
  
  </template>
  
  <script>
  export default {
    data(){
      return {
        // 表格信息 该用户的订单情况 ( 绑定上面的表格 )
        tableData: [],
        // 用户信息
        user: {
          // 用户名
          username: sessionStorage.getItem('userName'),
          // 用户账号 (邮箱)
          useracc: sessionStorage.getItem('email'),
          // 参数区
        }
      }
    },
    created(){
      console.log('我加载了用户详情页面!!', sessionStorage.getItem('userid'))
      if(sessionStorage.getItem('userid') != null){
        this.getOrderData();
      } else {
        this.$message.error('请先登录!');
        this.$router.push('/');
      }
      // 初始化完成后需要执行的方法
    },
    methods: {
      // 获取当前用户的所有订单数据
      async getOrderData(){
        let info = {
          // 查询参数
          query: '',
          // 当前页码
          pagenum: 1,
          // 每页显示条数 (要求显示所有的订单信息)
          pagesize: 9999,
          // 用户ID ( 当前要求非空 )
          user_id: sessionStorage.getItem('userid')
        };
        let ret = await this.$http.get('orders', {params: info});
        console.log('++++++++++++ 个人中心的打印区块 ++++++++++');
        console.log( ' 向接口请求数据所携带的参数:', info );
        console.log(ret);
        if(ret.meta.status != '200'){
          this.$message.error('获取数据失败');
          return false;
        }
        this.tableData = ret.data.goods;
        // 
      }
      // 方法区
    }
  }
  </script>
  
  <style lang="less" scoped >
  .ro{
    width:250px;
    height:250px;
    border-radius:50%; 
    position: absolute;
    left: 25%;
  }
  
  .container {
      display: flex;
  }
  
  .left, .right {
      flex-grow: 1;
      padding: 20px;
  }
  b{
    font-size: 35px;
  }
  .tb{
    position: fixed;margin: auto;left: 0;right: 0;top: 350px;width: 1100px;height: 400px;overflow: auto;
  }
  </style>